@import "variables";

seed-comments {
  .title {
    margin-top: pxTorem(30);
    padding-left: pxTorem(24);
    font-weight: bold;
    border-left: pxTorem(6) solid color($h5, c1);
    @include font-dpr(30px);
    color: color($h5, c2);
  }
  .comment {
    margin: pxTorem(30) pxTorem(30) 0;
    @include font-dpr(28px);
    &::after {
      content: '';
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      margin: 0 0 0 pxTorem(100px);
      height: 1px;
      border-bottom: 1px solid #e8e8e8;
      display: block;
    }

    .comment-header {
      display:flex;
      align-items: center;
      seed-avatar {
        height: pxTorem(80px);
        width: pxTorem(80px);
        min-width:pxTorem(80px);
        min-height: pxTorem(80px);
        margin-right: pxTorem(20px);
        border-radius: 50%;
      }
      .basic {
        width: 100%;
        flex: 1;
      }
      p {
        width: 100%;
        display: flex;
        justify-content: space-between;
      }
      .poster {
        max-width: 70%;
        @include font-dpr(28px);
        color: color($h5, c3);
      }
      time {
        @include font-dpr(26px);
        color: color($h5, c4);
        margin-top: pxTorem(10px);
        display: block;
      }
      .stats {
        position: relative; // float: right;
        padding-left: pxTorem(30);
        vertical-align: top;
        @include font-dpr(24px);
        &::before {
          content: '';
          position: absolute;
          left: 0;
          @include icon(25, 24, '#{$icons-path}/new_Likes.png');
        }
      }
      .thumb {
        &::before {
          content: '';
          @include icon(25, 24, '#{$icons-path}/new_Likes_hover.png');
        }
      }
    }
    .comment-content {
      overflow: hidden;
      text-align: justify;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      word-break: break-all;
      padding-left: pxTorem(100);
      @include font-dpr(28px);
      line-height: pxTorem(40);
      color: color($h5, c2);
      margin:pxTorem(20px) 0;
    }
  }
  .view-more {
    padding: pxTorem(40) pxTorem(30);
    span {
      display: block;
      height: pxTorem(90);
      line-height: pxTorem(90);
      text-align: center;
      @include font-dpr(30px);
      border-radius: 4px;
      color: #FFF;
      background-color: color($h5, c1);
    }
  }
  .show-control {
    color: color($h5, c1);
    text-align: right;
    vertical-align: middle;
    margin: pxTorem(30px) 0;
  }

  .more-detail::after{
     background: url(/assets/icon/table_closed_show.png) no-repeat center center/contain;
    content: '';
    display: inline-block;
    width: pxTorem(20px);
    height: pxTorem(20px);
    margin: 0 0 0 pxToRem(10px);
    transform: rotate(180deg);
  }

  .less-detail{
    display: none;
  }

  .less-detail::after{
    background: url(/assets/icon/table_closed_show.png) no-repeat center center/contain;
    content: '';
    display: inline-block;
    width: pxTorem(20px);
    height: pxTorem(20px);
    margin: 0 0 0 pxToRem(10px);
  }
  .more-detail{
    display: inline-block
  }
  .green-arrow-up{
     background: url(/assets/icon/table_closed_show.png) no-repeat center center/contain;
    content: '';
    display: inline-block;
    width: pxTorem(20px);
    height: pxTorem(20px);
    margin: 0 0 0 pxToRem(10px);
  }

}
